import React from 'react';
import { Tree } from 'antd';

const TreeNode = Tree.TreeNode;

class Aside extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        searchValue: '',
        autoExpandParent: true
      };
      this.handleSelect = this.handleSelect.bind(this);
    }

    handleSelect(value, e){
      const { getMenuInfo, updateParent } = this.props;
      const id = e.node.props.id;
      getMenuInfo({ menuId: id });
      updateParent({ menuId: id });
      console.log(value, e.node.props.id);
    }

    render() {
      const { menuTree = [] } = this.props;
      const { autoExpandParent, searchValue } = this.state;
      const loop = data => data.map((item) => {
        const index = item.name.indexOf(searchValue);
        const beforeStr = item.name.substr(0, index);
        const afterStr = item.name.substr(index + searchValue.length);
        const title = index > -1 ? (
          <span>
            {beforeStr}
            <span style={{ color: '#1890ff' }}>{searchValue}</span>
            {afterStr}
          </span>
        ) : <span>{item.name}</span>;
        if (item.childrenList) {
          return (
            <TreeNode key={item.id} title={title} id={item.id}>
              {loop(item.childrenList)}
            </TreeNode>
          );
        }
        return <TreeNode key={item.id} title={title}  id={item.id} />;
      });
      return (
        <Tree
          onExpand={this.onExpand}
          // expandedKeys={expandedKeys}
          autoExpandParent={autoExpandParent}
          onSelect={this.handleSelect}
          >
          {loop(menuTree)}  
        </Tree>
      );
    }
  }
  export default Aside;